<template>
  <div>
    <Row>
      <Col :span="16">&nbsp;</Col>
      <Col :span="4">
        <Button v-hasPermission="'addSysOrg'" type="primary" style="margin-left: 20px; margin-bottom: 5px" @click="addSysOrg">添加机构</Button>
      </Col>
    </Row>
    <Card>
      <Table :columns="orgColumns" :data="orgList"></Table>
      <Page :total="total" show-total @on-change="changePage" :page-index="postData.pageIndex" :page-size="postData.pageSize" @on-page-size-change="changePageSize" show-sizer style="margin-top: 10px"
      />
    </Card>
    <!-- 添加机构 -->
    <Modal title="添加机构" v-model="addOrgModal">
      <Form :label-width="100" ref="addOrg" :model="addOrgData" :rules="addOrgRules">
        <FormItem prop="orgName" label="机构名称：" >
          <Input v-model="addOrgData.orgName" style="width:300px;" placeholder="请输入机构名称"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancelAddOrg">取消</Button>
        <Button type="primary" @click="addOrg">确定</Button>
      </div>
    </Modal>
    <!-- 编辑机构 -->
    <Modal title="编辑机构" v-model="editOrgModal">
      <Form :label-width="80" ref="editOrg" :model="editOrgData" :rules="editOrgRules">
        <FormItem prop="orgName" label="机构名称">
          <Input v-model="editOrgData.orgName" style="width:300px;" placeholder="请输入机构名称"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancelEdit">取消</Button>
        <Button type="primary" @click="editOrg">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import http from '@/libs/http';
  export default {
    data() {
      return {
        orgColumns: [
          { title: '机构名称', key: 'orgName', align: 'center', },
          { title: '创建时间', key: 'createTime', align: 'center', },
          {
            title: '管理', key: 'manager', align: 'center', width: 200, render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.openEditOrg(params)
                    }
                  },
                  directives: [
                    { name: 'hasPermission', value: "editSysOrg" }
                  ]
                }, '编辑')
              ])
            }
          }
        ],
        orgList: [],
        total: 0,
        postData: {
          pageIndex: 1,
          pageSize: 10
        },
        addOrgModal: false,
        addOrgData: {
          orgName: ''
        },
        addOrgRules: {
          orgName: [
            { required: true, message: '机构名称不能为空', trigger: 'blur' },
            { type: 'string', min: 2, max: 20, message: '机构名要求2-20位之间', trigger: 'blur' },
          ]
        },
        editOrgModal: false,
        editOrgData: {},
        editOrgRules: {
          orgName: [
            { required: true, message: '机构名称不能为空', trigger: 'blur' },
            { type: 'string', min: 2, max: 20, message: '机构名要求2-20位之间', trigger: 'blur' },
          ]
        },
        currOrgId: '',
      }
    },
    methods: {
      getOrgList(cb) {
        http.get({
          vm: this,
          url: '/manager/org/listPage',
          data: this.postData,
          success: res => {
            this.orgList = res.data.list
            this.total = res.data.total
            cb && cb()
          }
        })
      },
      addSysOrg() {
        this.$refs['addOrg'].resetFields()
        this.addOrgModal = true
      },
      addOrg() {
        this.$refs['addOrg'].validate(valid => {
          if(valid){
            const { orgName } = this.addOrgData
            http.post({
              vm: this,
              url: `/manager/org/add`,
              data: this.addOrgData,
              success: res => {
                this.$Message.success('添加成功！')
                this.addOrgModal = false
                this.$refs['addOrg'].resetFields()
                this.getOrgList()
                this.addOrgData = { orgName: '' }
              }
            })
          }
        })
      },
      cancelAddOrg() {
        this.addOrgData = { orgName: '' }
        this.$refs['addOrg'].resetFields()
        this.addOrgModal = false
      },
      openEditOrg(params) {
        this.$refs['editOrg'].resetFields()
        this.editOrgModal = true
        const row = params.row
        this.editOrgData = { orgName: row.orgName, version: row.version, id: row.id }
      },
      editOrg() {
        this.$refs['editOrg'].validate(valid => {
          if(valid){
            const { orgName } = this.editOrgData
            http.post({
              vm: this,
              url: '/manager/org/edit',
              data: this.editOrgData,
              success: res => {
                this.$Message.success('编辑成功!');
                this.editOrgModal = false
                this.$refs['editOrg'].resetFields()
                this.editOrgData = {}
                this.getOrgList()
              }
            })
          }
        })
      },
      cancelEdit(){
        this.editOrgModal = false
        this.$refs['editOrg'].resetFields()
        this.editOrgData = {}
      },
      changePage(pageIndex) {
        this.postData.pageIndex = pageIndex
        this.getOrgList()
      },
      changePageSize(s) {
        this.postData.pageSize = s
        this.getOrgList()
      }
    },
    mounted() {
      this.getOrgList()
    }
  }
</script>
